<template>
  <view class="container">
    <view class="line"></view>
    <view class="block">
      <view class="block-item">
        <view class="label">
          业务员
        </view>
        <view class="block-item-fr">
          <view class="value">
            李四
          </view>
          <view class="sign">
            渠道经理c
          </view>
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          手机号
        </view>
        <view class="block-item-fr">
          <input type="text" class="value" style="text-align: right;" placeholder="请输入手机号" placeholder-class="styles" />
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          店铺名称
        </view>
        <view class="block-item-fr">
          <input type="text" class="value" style="text-align: right;" placeholder="请输入店铺名称"
            placeholder-class="styles" />
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          商家分类
        </view>
        <view class="block-item-fr">
          <view class="value">
            李四
          </view>
          <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="normal">
        <view class="block-item">
          <view class="label">
            营业时间
          </view>
          <view class="block-item-fr" @click="openTime">
            <view class="value" v-if="startTime">
              {{startTime}}-{{endTime}}
            </view>
            <view class="value" v-else>
              请选择
            </view>
            <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
          </view>
        </view>
        <view class="weekList">
          <uv-checkbox-group v-model="checkboxValue" placement="row" activeColor="#FF3C21">
          			<uv-checkbox name="Monday" label="周一"></uv-checkbox>
          			<uv-checkbox name="Tuesday" label="周二"></uv-checkbox>
                <uv-checkbox name="Wednesday" label="周三"></uv-checkbox>
                <uv-checkbox name="Thursday" label="周四"></uv-checkbox>
                <uv-checkbox name="Friday" label="周五"></uv-checkbox>
                <uv-checkbox name="Saturday" label="周六"></uv-checkbox>
                <uv-checkbox name="Sunday" label="周日"></uv-checkbox>
          		</uv-checkbox-group>
        </view>
      </view>
      <view class="normal">
        <view class="block-item" style="border-top: 2rpx solid #eee;">
          <view class="label">
            油品
          </view>
        </view>
        <view class="gasList">
          <view class="gasList-item" v-for="(item, index) in gasList" :key="index">
            {{item.name}}
          </view>
          <!-- <image class="gasAdd" src="/static/images/addImg.png" mode=""></image> -->
        </view>
      </view>
      <view class="normal" style="padding-bottom: 30rpx;">
        <view class="block-item" style="border-top: 2rpx solid #eee;">
          <view class="label">
            汽油
          </view>
        </view>
        <view class="gasList">
          <view class="gasList-item" v-for="(item, index) in qiyouList" :key="index">
            {{item.name}}
          </view>
          <!-- <image class="gasAdd" src="/static/images/addImg.png" mode=""></image> -->
        </view>
        <view class="youqiang">
          <view class="youqiang-title">
            92#油枪
          </view>
          <view class="youqiang-warpper">
            <view class="youqiang-warpper-item">
              1号枪
            </view>
            <view class="youqiang-warpper-item">
              2号枪
            </view>
            <view class="youqiang-warpper-item">
              3号枪
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="line"></view>
    <view class="block" style="padding: 40rpx 30rpx;box-sizing: border-box;">
      <view class="block-title">
        店铺图片
      </view>
      <view class="block-linner">
        <view class="block-linner-item">
          <view class="tp">
            <text style="color: red;">*</text>
            <text class="tp-title">
              店铺门头照
            </text>
            <text class="tp-desc">
              最多支持3张；仅支持：jpg，png
            </text>
          </view>
          <view class="imgs">
            <UploadImgs keyName="images" :uploadImg="formLine.images" @getUrl="getUrls" />
            <view class="viewImage">
              <viewImage :width="160" :height="160" imageUrl="/static/images/shili.png" bdRds="20rpx"></viewImage>
              <view class="viewImage-label">
                示例图
              </view>
            </view>
          </view>
        </view>
        <view class="block-linner-item">
          <view class="tp">
            <text style="color: red;">*</text>
            <text class="tp-title">
              内景图
            </text>
            <text class="tp-desc">
              最多支持3张；仅支持：jpg，png
            </text>
          </view>
          <view class="imgs">
            <UploadImgs keyName="images" :uploadImg="formLine.images" @getUrl="getUrls" />
            <view class="viewImage">
              <viewImage :width="160" :height="160" imageUrl="/static/images/shili.png" bdRds="20rpx"></viewImage>
              <view class="viewImage-label">
                示例图
              </view>
            </view>
          </view>
        </view>
        <view class="block-linner-item">
          <view class="tp">
            <text style="color: red;">*</text>
            <text class="tp-title">
              携手门店合影
            </text>
            <text class="tp-desc">
              最多支持3张；仅支持：jpg，png
            </text>
          </view>
          <view class="imgs">
            <UploadImgs keyName="images" :uploadImg="formLine.images" @getUrl="getUrls" />
            <view class="viewImage">
              <viewImage :width="160" :height="160" imageUrl="/static/images/shili.png" bdRds="20rpx"></viewImage>
              <view class="viewImage-label">
                示例图
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="line"></view>
    <view class="block">
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>合作类型
        </view>
        <view class="block-item-fr">
          <view class="value">
            不预付
          </view>
          <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>合作折扣
        </view>
        <view class="block-item-fr">
          <input type="text" class="value" style="text-align: right;" placeholder="请输入店铺名称"
            placeholder-class="styles" />
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>省市区
        </view>
        <view class="block-item-fr">
          <view class="value">
            请选择
          </view>
          <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>详细地址
        </view>
        <view class="block-item-fr">
          <input type="text" class="value" style="text-align: right;" placeholder="请输入详细地址"
            placeholder-class="styles" />
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>联系人
        </view>
        <view class="block-item-fr">
          <input type="text" class="value" style="text-align: right;" placeholder="请输入联系人" placeholder-class="styles" />
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>联系电话
        </view>
        <view class="block-item-fr">
          <input type="text" class="value" style="text-align: right;" placeholder="请输入联系电话"
            placeholder-class="styles" />
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>商家微信
        </view>
        <view class="block-item-fr">
          <input type="text" class="value" style="text-align: right;" placeholder="请输入商家微信"
            placeholder-class="styles" />
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>开票类型
        </view>
        <view class="block-item-fr">
          <view class="value">
            请选择
          </view>
          <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          <text style="color: red;">*</text>平台截图
        </view>
        <view class="block-item-fr">
          <view class="value">
            请选择
          </view>
          <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </view>
      <view class="block-linner" style="margin-top: 30rpx;">
        <view class="block-linner-item">
          <view class="tp">
            <text style="color: red;">*</text>
            <text class="tp-title">
              上传截图
            </text>
            <text class="tp-desc">
              最多支持3张；仅支持：jpg，png
            </text>
          </view>
          <view class="imgs">
            <UploadImgs keyName="images" :uploadImg="formLine.images" @getUrl="getUrls" />
          </view>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 160rpx;"></view>
    <view class="footer">
      <view class="btn1">
        返回
      </view>
      <view class="btn2" @click="toList">
        下一步
      </view>
    </view>

    <!-- 自定义时间选择器 -->
    <time-picker-popup ref="TimePickerPopupRef" title="营业时间" @confirm="confirm"></time-picker-popup>
  </view>
</template>

<script>
  // import TimePickerPopup from '@/components/time-picker-popup/time-picker-popup.vue';
  export default {
    // components: {
    //   TimePickerPopup
    // },
    data() {
      return {
        formLine: [],
        startTime: "",
        endTime: "",
        checkboxValue: ['apple'],
        gasList: [
          {
            name: "汽油"
          },
          {
            name: "柴油"
          }
        ],
        qiyouList: [
          {
            name: "92#"
          },
          {
            name: "95#"
          },
          {
            name: "98#"
          }
        ]
      }
    },
    methods: {
      toList() {
        uni.navigateTo({
          url: "/pages/login/merchantList"
        })
      },
      confirm(data) {
        // uni.showToast({
        //   title: `${data[0]}:${data[1]}-${data[3]}:${data[2]}`
        // })
        this.startTime = `${data[0]}:${data[1]}`;
        this.endTime = `${data[3]}:${data[2]}`;
      },
      openTime() {
        this.$refs.TimePickerPopupRef.open();
      }
    }
  }
</script>
<style>
  .uv-checkbox{
    padding: 16rpx;
    box-sizing: border-box;
  }
</style>
<style lang="scss" scoped>
  .youqiang{
    padding: 30rpx;
    box-sizing: border-box;
    background: #F7F8FA;
    border-radius: 30rpx;
    .youqiang-title{
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
    .youqiang-warpper{
      display: flex;
      flex-wrap: wrap;
      .youqiang-warpper-item{
        width: 130rpx;
        height: 56rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        border: 2rpx solid #CCCCCC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        text-align: center;
        line-height: 56rpx;
        margin-right: 30rpx;
        margin-top: 30rpx;
      }
    }
  }
   .gasList{
     display: flex;
     padding-bottom: 30rpx;
     box-sizing: border-box;
     flex-wrap: wrap;
     .gasList-item:nth-child(4n){
       margin-right: 0;
     }
     .gasList-item{
       width: 130rpx;
       height: 56rpx;
       background: #FFFFFF;
       border-radius: 16rpx;
       border: 2rpx solid #CCCCCC;
       font-weight: 400;
       font-size: 28rpx;
       color: #666666;
       text-align: center;
       line-height: 56rpx;
       margin-right: 30rpx;
       margin-top: 30rpx;
     }
     .gasAdd{
       width: 152rpx;
       height: 56rpx;
       margin-top: 30rpx;
     }
   }
  .viewImage{
    width: 160rpx;
    height: 160rpx;
    background: rgba(0,0,0,.3);
    border-radius: 12rpx;
    position: relative;
    .viewImage-label{
      font-weight: 500;
      font-size: 20rpx;
      color: #FFFFFF;
      position: absolute;
      bottom: 7rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 50;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    padding: 30rpx 50rpx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .btn1 {
      width: 180rpx;
      height: 88rpx;
      border-radius: 48rpx;
      border: 2rpx solid #EA7222;
      font-weight: bold;
      font-size: 32rpx;
      color: #EA7222;
      text-align: center;
      line-height: 88rpx;
    }

    .btn2 {
      width: 420rpx;
      height: 88rpx;
      background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
      border-radius: 48rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .container {
    .block {
      padding: 0 30rpx;
      box-sizing: border-box;
      background: #fff;

      .block-title {
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
      }

      .block-linner {
        .block-linner-item {
          .tp {
            display: flex;
            align-items: center;

            .tp-title {
              font-weight: 500;
              font-size: 28rpx;
              color: #333;
            }

            .tp-desc {
              font-weight: 400;
              font-size: 28rpx;
              color: #AAAAAA;
            }
          }

          .imgs {
            margin-top: 20rpx;
            display: flex;
          }
        }
      }

      .block-item {
        height: 112rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #eee;

        .label {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        .block-item-fr {
          display: flex;
          align-items: center;

          .arrow_icon {
            width: 36rpx;
            height: 36rpx;
          }

          .value {
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
          }

          .sign {
            width: 130rpx;
            height: 42rpx;
            background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
            border-radius: 8rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 42rpx;
            margin-left: 30rpx;
          }
        }
      }
    }
  }
</style>